<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>

<body>

    <input type="hidden" class="site-demo-text" id="data">
    {
    "title": "Layui常用模块"
    ,"list": [
    {
    "modname": "弹层"
    ,"alias": "layer"
    ,"site": "layer.layui.com"
    }
    ,{
    "modname": "表单"
    ,"alias": "form"
    }
    ,{
    "modname": "分页"
    ,"alias": "laypage"
    }
    ,{
    "modname": "日期"
    ,"alias": "laydate"
    }
    ,{
    "modname": "上传"
    ,"alias": "upload"
    }
    ]
    }
    </input>
    <br>
    <br>

    <div class="site-demo-text" id="tpl">
        <h3>{{ d.title }}</h3>
        <ul>
            {{#  layui.each(d.list, function(index, item){ }}
            <li>
                <span>{{ item.modname }}</span>
                <span>{{ item.alias }}：</span>
                <span>{{ item.site || '' }}</span>
            </li>
            {{#  }); }}

            {{#  if(d.list.length === 0){ }}
            无数据
            {{#  } }}
        </ul>
    </div>
    <br>
    <br>

    <div class="site-demo-tplres">
        <h2 class="site-demo-tplh2">视图结果</h2>
        <div class="site-demo-tplview" id="view"></div>
    </div>

    <script>
        var data = {
            "title": "Layui常用模块"
            , "list": [
                {
                    "modname": "弹层"
                    , "alias": "layer"
                    , "site": "layer.layui.com"
                }
                , {
                    "modname": "表单"
                    , "alias": "form"
                }
                , {
                    "modname": "分页"
                    , "alias": "laypage"
                }
                , {
                    "modname": "日期"
                    , "alias": "laydate"
                }
                , {
                    "modname": "上传"
                    , "alias": "upload"
                }
            ]
        };

        //匿名内部类
        var view = document.getElementById('view');
        layui.use('laytpl', function (laytpl) {
            var laytpl = layui.laytpl;
            laytpl(getTpl).render(data, function (html) {
                view.innerHTML = html;
            });



        });
    </script>

</body>

</html>
